The testWebhookEndpoint function requires a type parameter that's missing in this call. This will cause webhook tests to fail since the API needs to know whether it's an 'event' or 'transaction' type webhook.

Consider updating the function call to include the current filter type from the form:

await testWebhookEndpoint(webhookUrl, form.watch('filterType'));

This ensures the correct webhook type is passed to the testing endpoint.

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

The validation schema has an inconsistency between addresses and toAddresses fields. Both are marked as required with .nonempty(), but the UI in FilterDetailsStep only shows one field at a time based on the filterType.

When filterType is "transaction", the form will still attempt to validate the hidden addresses field, causing validation errors for users. Similarly, when filterType is "event", it will validate the hidden toAddresses field.

Consider implementing conditional validation based on the filterType:

export const webhookFormSchema = z.discriminatedUnion('filterType', [
  z.object({
    filterType: z.literal('event'),
    addresses: z.string().nonempty().refine(/*...*/),
    // Make toAddresses optional for event type
    toAddresses: z.string().optional(),
    // other fields...
  }),
  z.object({
    filterType: z.literal('transaction'),
    // Make addresses optional for transaction type
    addresses: z.string().optional(),
    toAddresses: z.string().nonempty().refine(/*...*/),
    // other fields...
  })
]);

This approach ensures fields are only validated when they're relevant to the selected filter type.

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

The error handling here only logs to the console without providing user feedback. Consider implementing a proper error state UI component that distinguishes between "no webhooks exist" and "failed to load webhooks." This would improve the user experience by clearly communicating when there's a system issue rather than showing an empty state that incorrectly suggests the user has no webhooks configured.

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

This exported interface 'AbiResponse' is not being used anywhere in the codebase, which is causing the knip linter to fail. Either remove the 'export' keyword to make it a local interface, or remove the interface entirely if it's not needed.

Spotted by Diamond (based on CI logs)

Is this helpful? React 👍 or 👎 to let us know.

The current address validation has a potential issue with empty inputs. The .refine() method will pass validation for strings containing only commas or spaces (like ",,,") because it's checking if every address is valid, but not verifying that valid addresses actually exist.

Consider enhancing the validation to ensure there's at least one valid address after splitting and filtering:

.refine(
  (val) => {
    const addresses = val.split(',').map(addr => addr.trim()).filter(Boolean);
    return addresses.length > 0 && addresses.every(isValidAddress);
  }, 
  { message: 'Enter at least one valid address' }
)

This approach first trims and filters out empty entries, then verifies both that there's at least one address and that all addresses are valid.

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

Why is this added?

The navigation buttons should also go inside the step component so this is easier to maintain and update later

Remove cn here - not required, please also remove this from everywhere else as well.

only use it when conditional styles need to be added or when the className string is too large and you want to break it down to multiple lines

Avoid using useQueries - If the number of queries can be large here it will crash the page due to a large amount of memory used. If possible, please do all request in a single useQuery

We have a isAddress utility exported from thirdweb/utils fro this already

Don't throw errors in server actions - You won't be able to see them in client component (you will only be able to see errors in local dev server but not in vercel preview or production environments)

If you want to return error message, you have to return the error message manually

Example:

return {
  errorMessage: await response.text()
}

The validation schema for toAddresses currently requires this field unconditionally, but it should only be required when filterType is set to 'transaction'. For event webhooks, this field isn't applicable. Consider implementing conditional validation using Zod's .superRefine() or a dynamic schema based on the selected filter type to prevent validation errors when users are creating event webhooks. This would improve the form experience by only validating fields relevant to the current webhook type.

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.